<template>
  <div id="app">
    <NAVBAR v-if='this.$route.path !== "/backstage/login"'></NAVBAR>
    <div v-else class="login">
      <div class="login-body">
        <div class="login-main" :class='this.LOGINSTATE ? "shake-horizontal" : ""'>
          <div class="login-header">
            火眼金睛后台管理系统
          </div>
          <div class="login-content">
            <div>
              <el-input placeholder="用户名" v-model='user.name'>
                <template slot="prepend"><i class="glyphicon glyphicon-user"></i></template>
              </el-input>
            </div>
            <div style="margin-top: 30px;margin-bottom: 20px">
              <el-input placeholder="密码" v-model="user.password" type='password'>
                <template slot="prepend"><i class="glyphicon glyphicon-key"></i></template>
              </el-input>
            </div>
            <div class="remember">
               <el-checkbox label="记住我" name="type"></el-checkbox>
               <div class="pull-right">
                 忘记密码
               </div>
            </div>
            <div class="login-btn" @click='this.goLogin'>
              登录
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="contain" v-if='this.$route.path !== "/login"'>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import NAVBAR from './components/widget/nav-bar'

export default {
  name: 'app',
  data () {
    return {
        user: {
          name: '',
          password: ''
        },
        LOGINSTATE: false
    }
  },
  methods: {
    goLogin () {
      this.$http('post', 'login', this.user)
      .then((data) => {
        if (data.code !== 1) {
          this.geterror()
          this.LOGINSTATE = true
          setTimeout(() => {
            this.LOGINSTATE = false
          }, 600)
        } else {
          this.$router.push('./statistical')
        }
      })
    },
    geterror () {
      this.$message.error('好气呀~账号或密码错误了呢')
    }
  },
  components: {
    NAVBAR
  }
}
</script>

<style lang='less'>
@import './less/var.less';
@import './less/biubiu.less';

body,
html{
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB";
}
#app{
  height: 100%;
}
.shake-horizontal{
    animation-name: shake-horizontal;
    animation-duration: 100ms;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-play-state: running;
}
@keyframes shake-horizontal
{
  2% {
    transform: translate(2px, -50%) rotate(0); }
  4% {
    transform: translate(5px, -50%) rotate(0); }
  6% {
    transform: translate(8px, -50%) rotate(0); }
  8% {
    transform: translate(-4px, -50%) rotate(0); }
  10% {
    transform: translate(2px, -50%) rotate(0); }
  12% {
    transform: translate(-9px, -50%) rotate(0); }
  14% {
    transform: translate(8px, -50%) rotate(0); }
  16% {
    transform: translate(9px, -50%) rotate(0); }
  18% {
    transform: translate(-8px, -50%) rotate(0); }
  20% {
    transform: translate(-7px, -50%) rotate(0); }
  22% {
    transform: translate(-7px, -50%) rotate(0); }
  24% {
    transform: translate(-3px, -50%) rotate(0); }
  26% {
    transform: translate(-4px, -50%) rotate(0); }
  28% {
    transform: translate(7px, -50%) rotate(0); }
  30% {
    transform: translate(6px, -50%) rotate(0); }
  32% {
    transform: translate(2px, -50%) rotate(0); }
  34% {
    transform: translate(-5px, -50%) rotate(0); }
  36% {
    transform: translate(9px, -50%) rotate(0); }
  38% {
    transform: translate(-8px, -50%) rotate(0); }
  40% {
    transform: translate(-6px, -50%) rotate(0); }
  42% {
    transform: translate(-6px, -50%) rotate(0); }
  44% {
    transform: translate(-1px, -50%) rotate(0); }
  46% {
    transform: translate(0px, -50%) rotate(0); }
  48% {
    transform: translate(5px, -50%) rotate(0); }
  50% {
    transform: translate(10px, -50%) rotate(0); }
  52% {
    transform: translate(-9px, -50%) rotate(0); }
  54% {
    transform: translate(-9px, -50%) rotate(0); }
  56% {
    transform: translate(0px, -50%) rotate(0); }
  58% {
    transform: translate(7px, -50%) rotate(0); }
  60% {
    transform: translate(1px, -50%) rotate(0); }
  62% {
    transform: translate(5px, -50%) rotate(0); }
  64% {
    transform: translate(-8px, -50%) rotate(0); }
  66% {
    transform: translate(0px, -50%) rotate(0); }
  68% {
    transform: translate(2px, -50%) rotate(0); }
  70% {
    transform: translate(-5px, -50%) rotate(0); }
  72% {
    transform: translate(-2px, -50%) rotate(0); }
  74% {
    transform: translate(9px, -50%) rotate(0); }
  76% {
    transform: translate(5px, -50%) rotate(0); }
  78% {
    transform: translate(-1px, -50%) rotate(0); }
  80% {
    transform: translate(-3px, -50%) rotate(0); }
  82% {
    transform: translate(-1px, -50%) rotate(0); }
  84% {
    transform: translate(-8px, -50%) rotate(0); }
  86% {
    transform: translate(-9px, -50%) rotate(0); }
  88% {
    transform: translate(9px, -50%) rotate(0); }
  90% {
    transform: translate(9px, -50%) rotate(0); }
  92% {
    transform: translate(4px, -50%) rotate(0); }
  94% {
    transform: translate(7px, -50%) rotate(0); }
  96% {
    transform: translate(9px, -50%) rotate(0); }
  98% {
    transform: translate(10px, -50%) rotate(0);}
  0%, 100% {
    transform: translate(0, -50%) rotate(0); }
}
.login{
  height: 100%;
  background: url('/backstage/admin/loginbg.jpg') center center no-repeat;
  // filter: blur(4px);
}
.pull-right{
    float: right;
}
.remember{
  font-size: 14px;
  color: #666;
  .pull-right{
    cursor: pointer;
    &:hover{
      color: @theme;
    }
  }
}
.login-btn{
  margin-top: 25px;
  color: white;
  width: 100%;
  background-color: @theme;
  border-radius: 2px;
  text-align: center;
  line-height: 35px;
  cursor: pointer;
  border: 1px solid @theme;
  box-shadow: 1px 1px 1px 0 rgba(69, 138, 243, 0.4);
}
.login-body{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  .login-main{
    width: 475px;
    height: 335px;
    border-radius: 5px;
    margin: 0 auto;
    background-color: white;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    .login-header{
      text-align: center;
      line-height: 50px;
      color: white;
      background: linear-gradient(to bottom, #4891ff, #417edc);
    }
    .login-content{
      padding: 40px 80px;
      i{
        font-size: 20px;
      }
    }
  }
}
</style>
